<template>
    <List 
      ref="chatListRef" 
      v-if="showList"
      :finished="computedFinished" 
      :list="computedRecords" 
      loadPos="top" 
      custom-class='chatList' 
      :scrollBottom="true"
      :loading="loading"
      @loadData="loadMoreData"
    >
      <template #item="{item, customClass}">
        <template v-if="item.type!=-1">
          <ChatRecordItem
            :align="item.sendUserId == userInfo.userId ? 'right' : 'left'"
            :key="item.id"
            :chat="item"
            :class="customClass"
          />
        </template>
        <template v-else>
          <TimeLine :key="item.id" :time="item.message" />
        </template>
      </template>
    </List>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
import useChatStore from '@/stores/chatStore'
import useRoomStore from '@/stores/roomStore'
import ChatRecordItem from './ChatRecordItem.vue'
import TimeLine from './TimeLine.vue'
import List from '@/components/custom/List/index.vue'
import PubSub from 'pubsub-js'
import useAuthStore from '@/stores/authStore'
import { getChatRecordsByRoomId } from '@/utils/Electron'
const chatStore = useChatStore()
const roomStore = useRoomStore()
const chatListRef = ref(null)
const showList = ref<boolean>(true)
const chatRecords = ref([])
const loading = ref(false)
const finished = ref(false)
const authStore = useAuthStore();

const userInfo = authStore.userInfo;
const scrollToBottom = () =>{
  chatListRef.value?.scrollToBottom?.()
}

const computedRecords = computed(()=> [...chatRecords.value, ...chatStore.currentChatRecords])
const computedFinished = computed(()=> {
  return computedRecords.value.length < 20 || finished.value
})
// 加载更多的数据
const loadMoreData = () => {
  loading.value = true
  getChatRecordsByRoomId(
    roomStore.currentChatRoomInfo.id + '', 
    computedRecords.value.length === 0 ? 0 : computedRecords.value.length-1, 20).then(res=> {
      if (res.success && res.data.list.length > 0) {
        const list = res.data.list.reverse()
        chatRecords.value = [...list, ...chatRecords.value]
        finished.value = !res.data.next
        loading.value = false
      }
  })
  //console.log('加载数据')
}
// 监听当前聊天房间的变化 重新赋值
watch(()=>chatStore.currentChatRecords, (v1, v2)=> {
  chatRecords.value = []
  finished.value = false
  if(v2.length!==0) {
    scrollToBottom()
  }
})
// 默认进来之后就把滚动条滚动到最下面
onMounted(()=> {
  //chatRecords.value = chatStore.currentChatRecords
  PubSub.subscribe('scrollBottom', () => {
    scrollToBottom()
  })
})
onUnmounted(()=> {
  PubSub.unsubscribe('scrollBottom')
})
</script>
<style lang="less" scoped>
.chatList {
  height: 100%;
  padding: 15px 32px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  box-sizing: border-box;
}
.chatList::-webkit-scrollbar {
  /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
  width: 4px;
  height: 0px;
}
.chatList::-webkit-scrollbar-button {
  /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
  /*background: #74d334;*/
  display: none;
}
.chatList::-webkit-scrollbar-track {
  /*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
  /*background: #ff66d5;*/
  display: none;
}
.chatList::-webkit-scrollbar-track-piece {
  /*内层轨道，滚动条中间部分（位置4）*/
  /*background: #ff66d5;*/
}
.chatList::-webkit-scrollbar-thumb {
  /*滚动条里面可以拖动的那部分（位置5）*/
  background: #cecece;
  border-radius: 15px;
  width: 2px;
}
.chatList::-webkit-scrollbar-corner {
  /*边角（位置6）*/
  background: #82afff;
}
.chatList::-webkit-scrollbar-resizer {
  /*定义右下角拖动块的样式（位置7）*/
  background: #ff0bee;
}
.chatList {
  scrollbar-arrow-color: #f4ae21; /**/ /*三角箭头的颜色*/
  scrollbar-face-color: #333; /**/ /*立体滚动条的颜色*/
  scrollbar-3dlight-color: #666; /**/ /*立体滚动条亮边的颜色*/
  scrollbar-highlight-color: #666; /**/ /*滚动条空白部分的颜色*/
  scrollbar-shadow-color: #999; /**/ /*立体滚动条阴影的颜色*/
  scrollbar-darkshadow-color: #666; /**/ /*立体滚动条强阴影的颜色*/
  scrollbar-track-color: #666; /**/ /*立体滚动条背景颜色*/
  scrollbar-base-color: #f8f8f8; /**/ /*滚动条的基本颜色*/
}
</style>
